<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单的水平导航栏</title>
	<style type="text/css">
    *{margin: 0;padding: 0;font-size: 16px;}
    body{
    	background-image: url(4.jpg);
    }
    .ul{
    	list-style: none;
    	border-bottom: 5px orange solid;
    	height: 50px;/*li浮动后，脱离文档流，所以要给ul定义宽度(自适应)和高度。*/
    	padding-left: 50px;/*将表格整体向左偏移。*/
        position: relative;
    }/*去掉ul的宽度不然无法浮动成一行。*/
    .ul a{
    	background-color: #005CAF;
    	color: #F4A7B9;
    	height: 30px;
    	line-height: 30px;
    	width: 100px;
    	display: block;/*重要点，设置为块级元素，这样可以直接对a设置样式，而不用对li设置。*/
    	margin-right: 10px;
    	text-decoration: none;
    	text-align: center;/*a标签文本居中对齐。*/
    	border:2px solid #a1a1a1;/*圆角矩形框*/
    	border-radius:25px;

    }
    a:hover{
    	background-color: #FFC408;
    	color: white;
    }
    .ul>li{
    	float: left;
    	margin-top: 18px;
    }
    .ul2{
        position:absolute;
        left: 50px;
        top: 50px;
        height: 0;/*设置高度为零，才能隐藏起来。*/
        overflow: hidden;
    }
    .ul li:hover .ul2{
        overflow: visible;
    }
	</style>
</head>
<body>
	<ul class="ul">
		<li><a href="#">首页</a>
            <ul class="ul2">
                <li><a href="#">T.O.P</a></li>
                <li><a href="#">GDragon</a></li>
                <li><a href="#">TaeYoung</a></li>
            </ul> 
        </li>
		<li><a href="#">新闻</a></li>
		<li><a href="#">博客</a></li>
		<li><a href="#">照片</a></li>
		<li><a href="#">留言</a></li>

	</ul>
</body>
</html>